<template>
    <div>
        <div class="top" align="left">
            <div class="tab tab_on">
                <span class="tab_on_left tab_left"><i class="tab_on_left el-icon-goods"></i>商品审核</span>
                <button class="tab_right tab_on_right" @click="rouBack"><i class="big el-icon-arrow-left"></i>返回</button>
                <button class="tab_right tab_on_right" @click="Refresh"><i class="big el-icon-refresh-left"></i>刷新</button>
            </div>
            <div class="tab_under">
                <el-button @click="tabledate" size="medium">全部商品(<span>1000</span>)</el-button>
                <el-button @click="likeDatas('已通过')" size="medium">已通过(<span>1000</span>)</el-button>
                <el-button @click="likeDatas('待审核')" size="medium">待审核(<span>1000</span>)</el-button>
                <el-button @click="likeDatas('未通过')" size="medium">未通过(<span>1000</span>)</el-button>
            </div>
        </div>
        <div class="tab" align="left">
            <span class="tab_left">筛选查询</span>
            <button @click="Advancedretrievalshow =!Advancedretrievalshow" class="tab_right">高级检索</button>
        </div>

        <div class="tab_two" align="left">
            <!--  商品模糊查的框-->
            <el-form
                    :inline="true"
                    :model="this.formInline"
                    class="demo-form-inline"
                    label-width="80px"
                    @keyup.enter.native="likeDatas('')"
                    @submit.native.prevent
                    size="mini">
                <el-form-item label="输入搜索:">
                    <el-input @keyup.enter.native="likeDatas('')"  class="tab_two_like" v-model="formInline.proname" placeholder="商品名称"></el-input>
                </el-form-item>
                <el-form-item label="商品分类:">
                    <el-select @keyup.enter.native="likeDatas" @click.enter.native="classifydate"  class="tab_two_like" v-model="formInline.classification" placeholder="请选择商品分类">
                        <el-option label=" " value=""></el-option>
                        <el-option v-for="(menu,index) in TreeData2"  :label="menu.label" :value="menu.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品状态:">
                    <el-select @keyup.enter.native="likeDatas('')"  class="tab_two_like" v-model="formInline.label" placeholder="上架/下架">
                        <el-option label=" " value=""></el-option>
                        <el-option label="已删除" value="0"></el-option>
                        <el-option label="上架" value="1"></el-option>
                        <el-option label="下架" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品标签:">
                    <el-select @keyup.enter.native="likeDatas('')"  class="tab_two_like" v-model="formInline.state" placeholder="">
                        <el-option label=" " value=""></el-option>
                        <el-option label="书" value="书"></el-option>
                        <el-option label="IT" value="IT"></el-option>
                        <el-option label="用品" value="用品"></el-option>
                        <el-option label="服装" value="服装"></el-option>
                        <el-option label="饮料" value="饮料"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div id="logbookTab">
            <div class="tab" align="left">
                <span class="tab_left"><i class="Icon el-icon-s-grid"></i> 商品审核列表</span>
            </div>
            <!-- 审核表 -->
            <el-table  border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
                <el-table-column
                        align="center"
                        type="selection"
                        width="56">
                </el-table-column>
                <el-table-column align="center" prop="productCode" sortable label="编号" width="86">
                </el-table-column>
                <el-table-column align="center" prop="mainImage" label="商品图片" width="140">
                    <template slot-scope="scope">
                        <img :src="scope.row.mainImage" style="height: 50px"/>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="productName" label="商品名称" width="100">
                </el-table-column>
                <el-table-column align="center" prop="currentpriceProduct" sortable label="现价" width="100">
                </el-table-column>
                <el-table-column align="center" prop="originalpriceProduct" sortable label="原价" width="100">
                </el-table-column>
                <el-table-column align="center" prop="searchKeywords" label="分类" width="120">
                </el-table-column>
                <el-table-column align="center" prop="trueName" label="上传人员" width="120">
                </el-table-column>
                <el-table-column align="center" prop="result" label="审核状态" width="120">
                    <template slot-scope="scope">
                        <div v-text="scope.row.result"></div>
                    </template>

                </el-table-column>
                <el-table-column align="center" prop="" label="操作" width="130">
                    <template slot-scope="scope">
                        <div class="operation">
                            <span @click="ViewdetailsShow(scope.row,scope.row.productId)" class="result_class">查看</span>
                            <span @click="Toexamine(scope.row,scope.$index)" class="result_class">审核</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[1,5,10,20]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="tableData.length">
                </el-pagination>
            </div>
        </div>
        <!--        高级检索-->
        <transition name="el-fade-in-linear">
            <div class="upDate_View_details" v-if="Advancedretrievalshow">
                <div class="View_details_top"><span>高级检索</span><span class="back" @click="Advancedretrievalshow = false">×</span></div>
                <el-form
                        :inline="true"
                        :model="this.formInline"
                        class="demo-form-inline"
                        label-width="80px"
                        @keyup.enter.native="likeDatas('')"
                        @submit.native.prevent
                >
                    <el-form-item class="Advanced_retrieval" label="输入搜索:">
                        <el-input @keyup.enter.native="likeDatas('')"  class="tab_two_like" v-model="formInline.proname" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品分类:">
                        <el-select @keyup.enter.native="likeDatas('')" @click.enter.native="classifydate"  class="tab_two_like" v-model="formInline.classification" placeholder="请选择商品分类">
                            <el-option label="暂不选择" value=""></el-option>
                            <el-option v-for="(menu,index) in TreeData2"  :label="menu.label" :value="menu.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品状态:">
                        <el-select @keyup.enter.native="likeDatas('')"  class="tab_two_like" v-model="formInline.label" placeholder="上架/下架">
                            <el-option label=" " value=""></el-option>
                            <el-option label="已删除" value="0"></el-option>
                            <el-option label="上架" value="1"></el-option>
                            <el-option label="下架" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品标签:">
                        <el-select @keyup.enter.native="likeDatas('')"  class="tab_two_like" v-model="formInline.state" placeholder="">
                            <el-option label=" " value=""></el-option>
                            <el-option label="书" value="书"></el-option>
                            <el-option label="IT" value="IT"></el-option>
                            <el-option label="用品" value="用品"></el-option>
                            <el-option label="服装" value="服装"></el-option>
                            <el-option label="饮料" value="饮料"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="商品价格:">
                        <el-input @keyup.enter.native="likeDatas('')"  class="tab_two_like" v-model="formInline.Price" placeholder="请输入价格"></el-input>
                    </el-form-item>
                    <el-form-item class="Advanced_retrieval" label="审核状态:">
                        <el-select @keyup.enter.native="likeDatas(formInline.Auditstatus)"  class="tab_two_like" v-model="formInline.Auditstatus" placeholder="">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已通过" value="已通过"></el-option>
                            <el-option label="待审核" value="待审核"></el-option>
                            <el-option label="未通过" value="未通过"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="View_details_bottom">
                    <div class="View_details_bottom_position">
                        <button @click="Advanced_retrieval_no" class="View_details_bottom_no">取消</button>
                        <button @click="likeDatas(formInline.Auditstatus)" class="View_details_bottom_yes">确定</button>
                    </div>
                </div>
            </div>
        </transition>
        <!--        查看商品详情页面-->
        <transition name="el-fade-in-linear">
            <div class="View_details" v-if="Viewdetailsshow">
                <div class="View_details_top"><span>商品详情</span><span class="back" @click="Viewdetailsshow = false">×</span></div>
                <el-form v-for="(viewData,index) in tableData2" :key="viewData.productId" :inline="true" class="demo-form-inline">
                    <el-form-item size="mini" class="View_details_content" label="商品编号：">
                        <el-input v-text="viewData.productCode"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品名称：">
                        <el-input v-text="viewData.productName"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品价格：">
                        <el-input v-text="viewData.currentpriceProduct"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品状态：">
                        <el-input v-text="viewData.result"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content" label="商品分类：">
                        <el-input v-text="viewData.title"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" class="View_details_content2" label="商品销量：">
                        <el-input v-text="viewData.hits"></el-input>
                    </el-form-item>
                    <div class="look">
                        <el-form-item  class="View_details_content" label="商品标签：">
                            <el-input v-text="viewData.searchKeywords" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                    <div class="View_details_content_commodity">
                        <el-form-item  class="View_details_content1" label="商品介绍：">
                            <el-input v-text="viewData.productDescription" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </transition>
<!--        审核页面-->
        <transition name="el-fade-in-linear">
            <div class="upDate_View_details" v-if="UpdateViewdetailsshow">
                <div class="View_details_top"><span>审核商品</span><span class="back" @click="UpdateViewdetailsshow = false">×</span></div>
                <el-form  :model="UpdateVdeta" :inline="true" class="demo-form-inline">
                    <div class="ToExamineclass">
                        <el-form-item size="mini" class="View_details_content" label="商品名称：">
                            <el-input   v-text="UpdateVdeta.productName"></el-input>
                        </el-form-item>
                    </div>
                    <div class="ToExamineclass_center">
                        <el-form-item label="商品审核：">
                            <el-radio-group v-model="UpdateVdeta.result">
                                <el-radio label="已通过" prop="已通过">通过</el-radio>
                                <el-radio label="未通过" prop="未通过">不通过</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="ToExamineclass">
                        <el-form-item  class="View_details_content1" label="反馈详情：">
                            <el-input v-model="UpdateVdeta.remarks" type="textarea"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <div class="View_details_bottom">
                    <div class="View_details_bottom_position">
                        <button @click="cancelModification" class="View_details_bottom_no">取消</button>
                        <button @click="confirmModification" class="View_details_bottom_yes">确定</button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>

    export default {
        props:['product'],
        inject:['reload'],
        data() {
            return {
                //操作日志表格数据
                tableData: [],//可能会有变动
                tableData2:[],//过度数据用的
                tableData3:[],//不会变的所有商品数据
                //下拉框数据
                TreeData2:[],
                TreeData3:[],//不会变动的数据
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5 ,// 每页的数据条数
                UpdateViewdetailsshow:false,//审核商品
                Viewdetailsshow:false,//查看
                Advancedretrievalshow:false,//高级检索显示隐藏
                //模糊查用
                formInline: {
                    proname: '',
                    classification: '',
                    label:'',
                    state:'',
                    Price:'',
                    Auditstatus:''
                },
                //审核商品信息用
                UpdateVdeta: {},
                UpdateVdeta2: {},
                show:false,
                ind:0,
            }
        },

        methods: {
            //刷新页面
            Refresh(){
                this.reload();
            },
            //返回上一页
            rouBack(){
                this.$router.back()
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            //所有商品，创建一个方法传入后台数据(表Table)
            tabledate(){
                this.$http.get("/pagepro",{
                }).then(res => {
                    this.tableData = res.data;
                    this.tableData3 = res.data;
                });
            },
            //模糊查数据
            classifyTreedate(){
                this.$http.get("/getPriductTree").then(res => {
                    this.TreeData3 = res.data;
                });
            },
            //模糊查
            likeDatas(StringResult){
                this.currentPage = 1;
                this.$http.get("/pagepro",{
                    params:{
                        productName:this.formInline.proname,
                        categroyId:this.formInline.classification,
                        productSate:this.formInline.label,
                        searchKeywords:this.formInline.state,
                        result:StringResult,
                        currentpriceProduct:this.formInline.Price
                    }
                }).then(res => {
                    this.tableData = res.data;
                });
                this.Advancedretrievalshow = false;
            },
            // 高级检索
            Advanced_retrieval_no(){
                    this.formInline.proname = '',
                    this.formInline.classification = '',
                    this.formInline.label = '',
                    this.formInline.state = '',
                    this.formInline.Auditstatus = '',
                    this.formInline.Price = '',
                    this.Advancedretrievalshow = false;
            },
            //从后台获取下拉框数据
            classifydate(){
                this.TreeData2 = [];
                this.getTreeData(this.TreeData3)
            },
            //获取分类最底层
            getTreeData(data) {
                // 循环遍历json数据
                for (let i = 0; i < data.length; i++) {
                    if (data[i].children.length < 1) {
                        // children若为空数组，则将children设为undefined
                        this.TreeData2.push(data[i])
                    } else {
                        // children若不为空数组，则继续 递归调用 本方法
                        this.getTreeData(data[i].children);
                    }
                }
            },
            //查看按钮
            ViewdetailsShow(row,id){
                this.tableData2=[];
                for (let i = 0; i<this.tableData3.length;i++){
                    if(this.tableData3[i].productId == id){
                        this.tableData2.push(this.tableData3[i])
                    }
                }
                this.Viewdetailsshow = !this.Viewdetailsshow
            },
            //审核
            Toexamine(row,index){
                this.ind = index;
                this.UpdateVdeta2 = JSON.parse( JSON.stringify(row));
                this.UpdateVdeta=this.UpdateVdeta2;
                this.UpdateViewdetailsshow = !this.UpdateViewdetailsshow
            },
            //确认审核
            confirmModification(){
                console.log(this.UpdateVdeta)
                this.$http.get("/updateCourseRecord",{
                    params:{
                        id:this.UpdateVdeta.productId,
                        implementId:"暂时是假的",
                        result:this.UpdateVdeta.result,
                        remarks:this.UpdateVdeta.remarks
                    }
                }).then(res => {
                    console.log(res.data)

                });
                this.$message ( {
                    duration:1000,
                    type: "success" ,
                    message:"审核完成!"
                });
                this.UpdateViewdetailsshow = !this.UpdateViewdetailsshow
                this.reload();
            },
            //取消审核
            cancelModification(){
                this.UpdateViewdetailsshow = !this.UpdateViewdetailsshow
            },
        },
        //先调用一下传入数据的方法
        created(){
            this.tabledate();
            this.classifyTreedate();
        }

    };



</script>
<style>
    /*背景色*/
    body{
        background: #F9F9F9;
    }
    /*头*/
    .tab_on{
        margin: -20px 0px 12px -20px;
        padding: 0px 10px 4px 0px;
    }
    .tab_under{
        margin: 0px 0px 15px 0px;
    }
    .tab_left{
        margin: 0px 0px 0px 9px;
        font-size: 13px;
    }
    .tab_on_left{
        color: #A2A2A2;
        font-size: 15px;
    }
    .tab{
        height: 42px;
        background: #F3F3F3;
        border: 1px #E4E4E4 solid;
        line-height: 2.5;
    }
    .tab_right{
        margin: 10px 15px 0px 0px;
        padding: 4px 13px;
        float: right;
        font-size: 12px;
        background: white;
        border: 2px #D8D8D8 solid;
    }
    .tab_on_right{
        padding: 4px 17px;
        font-size: 12px;
        color: #9A9A9A;
    }
    .big{
        font-size: 13px;
        padding: 0px 5px 0px 0px;
        font-weight: 900;
    }
/*    表格*/
    #logbookTab{
        margin: 0px 0px 0px 0px;
    }
/*    查看弹出层*/
   .look{
       margin: 0px 0px 0px 0px;
   }
/*    审核弹出层*/
    .ToExamineclass{
        margin: 29px 0px 61px 0px;
    }
    .ToExamineclass_center{
        margin:33px 0px -41px 62px;
    }
</style>